<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数据概览</title>


    <!--图标样式-->
    <link rel="stylesheet" type="text/css" th:href='@{/plugin/oldbootstrap/css/bootstrap.min.css}' />
    <link rel="stylesheet" type="text/css" th:href='@{/css/scroll.css}' />
    <!--主要样式-->
    <style>

        .tree {
            overflow:scroll;
            overflow-x: hidden;
            float: left;
            padding:10px;
            min-height: 400px;
            max-height: 700px;
            width:25%;
        }
        .tree li {
            list-style-type:none;
            margin:0;
            padding:5px 0px 0 3px;
            position:relative
        }
        .tree li::before, .tree li::after {
            content:'';
            left:-20px;
            position:absolute;
            right:auto
        }
        .tree li::before {
            border-left:1px solid #999;
            bottom:50px;
            height:100%;
            top:0;
            width:1px
        }
        .tree li::after {
            border-top:1px solid #999;
            height:20px;
            top:25px;
            width:25px
        }
        .tree li span {
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            border:1px solid #999;
            border-radius:5px;
            display:inline-block;
            padding:1px 5px;
            text-decoration:none
        }
        .tree li.parent_li>span {
            cursor:pointer
        }
        .tree>ul>li::before, .tree>ul>li::after {
            border:0
        }
        .tree li:last-child::before {
            height:30px
        }
        .tree li.parent_li>span:hover, .tree li.parent_li>span:hover~ul li span {
            background-color: #eee;
/*            border:1px solid #94a0b4;
            color:#000*/
        }
        .background{
            background-color: #eee;
        }
    </style>

    <script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
    <script language='JavaScript' th:src="@{/ajax/layer/layer.min.js}"></script>
    <script language='javascript' th:src='@{/js/constant.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-table/bootstrap-table.js}'></script>
    <script language='JavaScript' th:src='@{/js/network.js}'></script>
    <script language='JavaScript' th:src='@{/js/common.js}'></script>
    <script language='JavaScript' th:src='@{/js/public.js}'></script>

    <script type="text/javascript">
        $(function(){
            ajax.postData(publicData.urls.data.getDataInfo, {}, function (data) {
                var treeData=data;
                var htmlstart='';
                for(var i=0;i<treeData.length;i++){
                    htmlstart+='<ul><li><span><i class="icon-chevron-right"></i>&nbsp;'+treeData[i].dataName+'</span>'
                    var child1=treeData[i].child;
                    for(var j=0;j<child1.length;j++){
                        htmlstart+='<ul><li style="display: none"><span><i class="icon-chevron-right"></i>&nbsp;'+child1[j].dataName+'</span>'
                        var child2=child1[j].child;
                        for(var k=0;k<child2.length;k++){
                            var table_Comment=child2[k].dataComment
                            var table_Name=child2[k].dataName
                            if(table_Comment!=""){
                                table_Name=table_Comment;
                            }
                            htmlstart+='<ul><li style="display: none"><span><i class="icon-chevron-right"></i>&nbsp;'+table_Name+'</span>'
                            var child3=child2[k].child;
                            for(var l=0;l<child3.length;l++){
                                var culumn_Comment=child3[l].dataComment
                                var culumn_Name=child3[l].dataName
                                if(culumn_Comment!=""){
                                    culumn_Name=culumn_Comment;
                                }
                                htmlstart+='<ul><li style="display: none"><span><i></i>&nbsp;'+culumn_Name+'</span>'
                                htmlstart+='</li></ul>'
                            }
                            htmlstart+='</li></ul>'
                        }
                        htmlstart+='</li></ul>';
                    }
                    htmlstart+='</li></ul>';
                }

                $(".tree").html(htmlstart);
                $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Expand this branch');

                $('.tree li.parent_li > span').on('click', function (e) {
                    var children = $(this).parent('li.parent_li').find(' > ul > li');
                    if (children.is(":visible")) {
                        children.hide('fast');
                        $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-chevron-right').removeClass('icon-chevron-down');
                        $(this).removeClass("background");
                    } else {
                        children.show('fast');
                        $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-chevron-down').removeClass('icon-chevron-right');
                        $(this).addClass("background");
                    }
                    //组织事件冒泡
                    e.stopPropagation();
                });
            });
        });

    </script>

</head>
<body>
<!--<div class="main">-->
    <div class="tree">

    </div>
<!--    <div class="data">

    </div>-->
<!--</div>-->
<script>

</script>
</body>
</html>